<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
    //-- 构建BasePath
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
    pageContext.setAttribute("basePath", basePath);
%>
<script src="${basePath}script/jquery.3.6.0.min.js"></script>
<script src="${basePath}script/bootstrap.js"></script>
<html>
<head>
    <title>首页</title>
    <link rel="stylesheet" href="${basePath}css/bootstrap.css">
</head>
<body>

<!-- 新增的模态框 Modal -->
<div class="modal fade" id="empAddModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel">Modal title</h4>
            </div>
            <div class="modal-body">
                <form class="form-horizontal">
                    <div class="form-group">
                        <label for="empName" class="col-sm-2 control-label">员工姓名</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="empName" name="empName" placeholder="请输入员工姓名">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="empGender" class="col-sm-2 control-label">员工性别</label>
                        <div class="col-sm-10">
                            <select class="form-control" id="empGender" name="empGender">
                                <option value="男" selected>男</option>
                                <option value="女">女</option>
                            </select>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="empPhone" class="col-sm-2 control-label">员工电话</label>
                        <div class="col-sm-10">
                            <input type="tel" class="form-control" id="empPhone" name="empPhone" placeholder="请输入员联系方式"  onblur="d()" required><span id="e"></span>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="deptName" class="col-sm-2 control-label">所属部门</label>
                        <div class="col-sm-10">
                            <select class="form-control" id="deptName" name="deptName">
                                <option value="男" selected>男</option>
                            </select>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary" id="btnSaveEmp">Save</button>
            </div>
        </div>
    </div>
</div>



<div class="container">
    <%--标题--%>
    <div class="row">
        <div class="col-md-12 text-center">
            <h3>SSM-CRUD</h3>
        </div>
    </div>
    <hr>

    <!-- 搜索框 -->
    <div class="search row">
        <div class="col-md-7">
            <form class="form-horizontal" method="post">
                <input type="text" class="form-control"  placeholder="请输入查询条件">
            </form>
        </div>
        <div class="col-md-3">
            <!-- button 默认type 就是submit -->
            <button type="button" class="btn btn-primary">查询</button>
            <button type="button" class="btn btn-success" id="empAdd">新增</button>
            <button type="button" class="btn btn-danger">全部删除</button>
        </div>
    </div>
    <!-- 主体数据显示 -->
    <div class="row">
        <div class="col-md-12">
            <table class="table table-hover text-center">
                <thead>
                <tr>
                    <td>
                        <input type="checkbox" class="checkAll">
                    </td>
                    <td>
                        #
                    </td>
                    <td>
                        姓名
                    </td>
                    <td>
                        性别
                    </td>
                    <td>
                        电话
                    </td>
                    <td>
                        部门名称
                    </td>
                    <td>
                        操作
                    </td>
                </tr>
                </thead>
                <tbody id="empBody">

                </tbody>
            </table>
        </div>
    </div>
    <!-- 分页的信息 -->
    <div class="row">
        <div class="col-md-12 text-center">
            <nav aria-label="Page navigation">
                <ul class="pagination">
                    <li class="disabled">
                        <a href="#" aria-label="Previous">
                            <span aria-hidden="true">&laquo;</span>
                        </a>
                    </li>
                    <li><a href="#">1</a></li>
                    <li><a href="#">2</a></li>
                    <li class="active"><a href="#">3</a></li>
                    <li><a href="#">4</a></li>
                    <li><a href="#">5</a></li>
                    <li>
                        <a href="#" aria-label="Next">
                            <span aria-hidden="true">&raquo;</span>
                        </a>
                    </li>
                </ul>
            </nav>
        </div>
    </div>


</div>



<script>
    //-- 页面元素加载完成后执行，元素属性不一定加载完成，DOM结构有了，但是不一定有内容
    $(function () {
        gotoPage(1);
        
    })

    function gotoPage(pageNum) {
        $.ajax({
            url:"${basePath}employ/emps",
            type:"post",
            data:{"pageNum":pageNum},
            success:function (result) {

                // -- 表格主体填充
                fillTableBody(result);
                //-- 分页模块填充
                fillPageInfo(result);
            },
            error:function (err) {

            }
        })
    }
    function fillTableBody(result){
        // -- 先清空数据
        $("#empBody").empty();
        let tr = ""
        let emps = result.data.pageInfo.list;
        console.log(result)
        $.each(emps,function (index,element) {
            tr += "<tr>" +
                    "<td><input type='checkbox'></td>"+
                    "<td>" + element.empId + "</td>" +
                    "<td>" + element.empName + "</td>" +
                    "<td>" + element.empGender + "</td>" +
                    "<td>" + element.empPhone + "</td>" +
                    "<td>" + element.bumen + "</td>" +
                     "<td>" +element.deptId+ "</td>" +
                 "</tr>";
        })
        $("#empBody").html(tr);
    }
    function fillPageInfo(result){
    }
    function fillPageInfo(result) {

        //-- 清空列表中的数据
        $(".pagination").empty();

        let prev, next, li;

        //-- 添加上一页
        if (result.data.pageInfo.pageNum != 1) {
            //-- 如果当期页是第一页 上一页不能点
            prev = $('<li><a href="javascript:;" onclick="gotoPage(' + result.data.pageInfo.prePage + ')" aria-label="Previous"><span aria-hidden="true">&laquo;</span></a></li>');
        } else {
            prev = $('<li class="disabled"><a href="#" aria-label="Previous"><span aria-hidden="true">&laquo;</span></a></li>');
        }
        $(".pagination").append(prev)


        //-- 添加具体的页码 1 2 3
        //-- index    是element 在navigatepageNums的下标
        //-- element  是navigatepageNums中的元素，值是页码 1 2 3
        $(result.data.pageInfo.navigatepageNums).each(function (index, element) {
            if (result.data.pageInfo.pageNum == element) {
                li = $('<li class="active"><a href="javascript:;">' + element + '</a></li>');
            } else
                li = $('<li><a href="javascript:;" onclick="gotoPage(' + element + ')" ">' + element + '</a></li>');

            $(".pagination").append(li);
        })

        //-- 添加下一页
        if (result.data.pageInfo.pageNum != result.data.pageInfo.pages)
            next = $('<li><a href="javascript:;" onclick="gotoPage(' + result.data.pageInfo.nextPage + ')" aria-label="Next"><span aria-hidden="true">&raquo;</span></a></li>');
        else
            next = $('<li class="disabled"><a href="#" aria-label="Next"><span aria-hidden="true">&raquo;</span></a></li>');
        $(".pagination").append(next)


    }

    //-- $(function(){}) 可以出现多次，都会被执行！！
    $(function () {
        $("#empAdd").click(function () {

            //-- 重置表单中的内容
            resetForm($("#empAddModal form"));

            fetchDeptName($("#deptName"),$("#empAddModal"));
        })

        $("#empName").blur(function () {
            //-- 验证用户名唯一
            let empName = $("#empName").val();
            $.post("employ/checkNameExists", {"empName": empName}, function (result) {
                if (!result.success) {
                    $("#empNameTips").text(result.message).css("color", "red");
                    $("#empName").focus();
                } else {
                    $("#empNameTips").text(result.message).css("color", "green");
                }
            })
        })

        //-- 这是纯粹的前端验证，如果有后端验证，这里必须接收后端验证的响应
        // $("#empPhone").blur(function () {
        //     //-- 判断手机号码至少有11位！！
        //     let empPhone = $("#empPhone").val();
        //     if (empPhone.length != 11) {
        //         $("#empPhoneTips").text("手机长度不足11位").css("color", "red");
        //         $("#empPhone").focus();
        //     } else {
        //         $("#empPhoneTips").text("手机号码可用").css("color", "green");
        //     }
        // })


        //-- 伪装REST
        $("#btnSaveEmp").click(function () {
            //-- 正式的保存数据到后端
            $.post("${basePath}employ/save", $("#empAddModal form").serialize(), function (result) {
                if (result.success) {
                    $("#empAddModal").modal('hide');
                    //-- 数据回显
                    gotoPage(1);
                }
            })


        })
    })

    function resetForm(form) {
        $(form)[0].reset();
        $(form).find("span").text("");
        $(form).find("span").removeClass("color");
    }

    function updateEmploy(employ) {
        console.log("update")
        console.log(employ)

        //-- 给模态框填充数据
        $("#empUpdateId").val(employ.empId).attr("readOnly",true);
        $("#empUpdateName").val(employ.empName);
        $("#empUpdateGender").val(employ.empGender);
        $("#empUpdatePhone").val(employ.empPhone);

        //-- 获取部门信息并显示模态框
        fetchDeptName($("#deptUpdateName"), $("#empUpdateModal"),employ.deptId);
    }

    function deleteEmploy(element) {

        console.log("delete" + element.empName)
        //-- delete  /employ/1
        if (confirm("确认删除【" + element.empName + "】吗？")) {
            $.ajax({
                type: "delete",
                url: "${basePath}/employ/" + element.empId,
                success: function (result) {
                    alert(result.message);
                    gotoPage(1);
                }
            })
        }
    }


    function fetchDeptName(deptName,modal,selected = 1) {
        let depts = []
        //-- 1.获取部门名称列表
        $.post("${basePath}dept/listDeptName", function (result) {
            console.log(result)
            depts = result.data.deptNameList;
            //-- 清空已有的数据
            $(deptName).empty();
            let option ;
            //-- 2.填充部门数据
            $.each($(depts), function (index, dept) {
                console.log(dept)
                //-- $(<标签 属性></标签>)
                if (dept.deptId == selected){
                    option = $("<option value='" + dept.deptId + "' selected>" + dept.deptName + "</option>")
                }
                else{
                    option = $("<option value='" + dept.deptId + "'>" + dept.deptName + "</option>")
                }
                $(deptName).append(option);
            })
            //--显示模态框
            $(modal).modal('show');
        })
    }
    function d() {
        var reg=/\w+@\w+\.\w{2,3}/
        var str=document.getElementById('empPhone').value;
        if(reg.test(str))
        {document.getElementById('e').innerHTML='<font color="green">请继续输入。。。</font>'
            document.getElementById('empPhone').focus();}
        else
        {document.getElementById('e').innerHTML='<font color="red">格式错误，请重新输入！</font>'
            document.getElementById('empPhone').focus();}
    }


</script>

</body>
</html>

